<template>
	<view class="test-alova-page-page">
		<wd-sticky>
			<view class="search-wall">
				<wd-search v-model="keyword" @search="onSearch" hide-cancel />
			</view>
		</wd-sticky>
		<wd-cell v-for="(item, index) in list" :key="index" :title="item.title" is-link />
		<wd-loadmore custom-class="loadmore" :state="loadmoreState" />
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import { onReachBottom } from '@dcloudio/uni-app';
	import { getDemoList } from '@/common/api/api';
	import { usePaginationRequest } from '@/common/usePaginationRequest';

	const keyword = ref('')
	const params = ref<ArticleQuery>({
		title: '123',
		keyword: ''
	})
	const {
		list,
		loading,
		loadmoreState,
		fetch,
		reset
	} = usePaginationRequest<Article, ArticleQuery>(getDemoList, params.value);

	// 页面加载时首次请求
	onMounted(() => {
		reset();
	});

	// 滚动到底部触发加载下一页
	onReachBottom(async () => {
		await fetch();
	});

	// 改变搜索条件，重新加载
	const onSearch = async () => {
		params.value.keyword = keyword.value
		await reset(params.value);
	};
</script>

<style lang="scss" scoped>
	.test-alova-page-page {
		.search-wall{
			//吸顶加搜索框存在bug，必须加宽度
			width: 100vw;
		}
	}
</style>